<template>
  <view class="container">
    <view class="data-list">
      <view
        class="data-item"
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="onClickItem(item, index)"
      >
        <view class="hd" v-if="item.icon">
          <image :src="item.icon" mode="widthFix" class="icon" />
        </view>
        <view class="bd">
          <view class="title">
            {{ item.name }}
          </view>

          <view class="desc">
            {{ item.describe }}
          </view>
        </view>
        <view class="ft">
          <view class="btn btn-primary-white"> 进入 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import qs from "qs";
export default {
  mixins: [viewModule],
  data() {
    return {
      mixinViewOptions: {
        getURL: "/getCollegeTag",
        isPage: true,
        isShowLoading: false,
        reachBottom: true,
        createdIsNeed: true,
        pullDown: true,
      },
      dataForm: {
        sort: "desc",
      },
    };
  },
  methods: {
    onClickItem(item, index) {
      let url = item.url;
      if (!url) {
        return;
      }
      let parse = {};
      if (url.indexOf("?") !== -1) {
        parse = url.substring(url.indexOf("?") + 1, url.length);
        url = url.substring(0, url.indexOf("?"));
        parse = qs.parse(parse);
      }

      this.$Router.push({
        path: "/pages/college/article/list",
        query: {
          item: encodeURIComponent(JSON.stringify(item)),
          ...parse,
        },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.container {
  min-height: calc(100vh - var(--window-top));
  background: #fff;
}

.data-item {
  display: flex;
  padding: 20rpx 24rpx;
  align-items: center;

  >.hd {
    flex: 0 0 auto;
    margin-right: 30rpx;

    >.icon {
      display: flex;
      width: 80rpx;
      height: 80rpx;
    }
  }

  >.bd {
    flex: 1;

    >.title {
      font-size: 32rpx;
      line-height: 1;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      no-wraps(1);
      margin-bottom: 16rpx;
    }

    >.desc {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 1;
      no-wraps(1);
    }
  }

  >.ft {
    flex: 0 0 auto;
    margin-left: 24rpx;

    >.btn {
      width: 112rpx;
      height: 56rpx;
      line-height: 52rpx;
      font-size: 30rpx;
    }
  }
}
</style>